<template>
	<div class="popup" :class="{show:ani}" v-show="show">
		<div class="panel">
			<div class="top clearfix">
				<a @click="onSubmit">完成</a>
			</div>
			<div class="list clearfix">
				<a @click="onClick(i)" :class="{active:i===act}" key={i} v-for="i of citys"><span>{{i}}</span></a>
			</div>
		</div>
		<div class="bg" @click="onSubmit"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			act: '',
			citys: '京沪津冀晋蒙辽吉黑苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新台',
			show: false,
			ani: false,
		}
	},
	beforeMount() {
		this.act = this.active
		this.citys = this.citys.split('')
	},
	methods: {
		onClick(c) {
			this.act = c;
		},
		onSubmit() {
			this.onComplete(this.act)
		}
	},
	watch: {
		visible(v) {
			if (v) {
				this.show = true
				clearTimeout(this.tm)
				this.tm = setTimeout(() => {
					this.ani = true
				})
			} else {
				this.ani = false
				clearTimeout(this.tm)
				this.tm = setTimeout(() => {
					this.show = false
				}, 300)
			}
		}
	},
	props: {
		active: {
			type: String,
		},
		onComplete: {
			type: Function
		},
		visible: {
			type: Boolean
		}
	}
}
</script>

<style scoped lang="scss">
	@import './style'
</style>